JavaScript 中 substr、substring 和 slice 的区别

JavaScript 提供了 substr()、substring() 和 slice() 三种常见的字符串截取方法。它们都能从字符串中取出一部分内容，但参数含义、对负数的处理方式和推荐程度有所不同。

这三种方法都不会修改原字符串，而是返回一个新字符串。

1. substr(start, length)

substr() 从指定位置开始，截取指定长度的字符。

const str = "JavaScript";

str.substr(4, 6); // "Script"

参数含义：

• start：开始位置，支持负数。负数表示从字符串末尾倒数。

• length：要截取的字符数量，可选。省略时截取到末尾。

const str = "JavaScript";

str.substr(4);     // "Script"
str.substr(-6, 6); // "Script"

注意：substr() 已被标记为遗留特性（legacy feature），虽然许多环境仍支持它，但新代码通常不建议使用。

2. substring(start, end)

substring() 从 start 开始截取，到 end 之前结束。end 不包含在结果中。

const str = "JavaScript";

str.substring(4, 10); // "Script"

参数含义：

• start：开始位置。

• end：结束位置，不包含该位置。省略时截取到末尾。

• 参数为负数时，会按 0 处理。

• 如果 start 大于 end，两个参数会自动交换。

const str = "JavaScript";

str.substring(4, 10); // "Script"
str.substring(10, 4); // "Script"，参数自动交换
str.substring(-2, 4); // "Java"，负数按 0 处理

这种自动交换参数的行为有时会让结果不符合直觉，使用时需要留意。

3. slice(start, end)

slice() 同样从 start 开始，截取到 end 之前结束。

const str = "JavaScript";

str.slice(4, 10); // "Script"

它与 substring() 的主要区别在于对负数的处理：

• 负数表示从字符串末尾倒数。

• start 大于 end 时，不会交换参数，而是返回空字符串。

• 省略 end 时，截取到末尾。

const str = "JavaScript";

str.slice(-6);     // "Script"
str.slice(4, 10);  // "Script"
str.slice(10, 4);  // ""

三者对比

一个例子看清区别

const str = "JavaScript";

console.log(str.substr(4, 3));    // "Scr"
console.log(str.substring(4, 7)); // "Scr"
console.log(str.slice(4, 7));     // "Scr"

这个例子中三者结果相同，但参数含义不同：

• substr(4, 3)：从位置 4 开始，取 3 个字符。

• substring(4, 7)：从位置 4 取到位置 7 之前。

• slice(4, 7)：同样从位置 4 取到位置 7 之前。

如何选择？

大多数情况下，优先使用 slice()：

const text = "JavaScript";
const result = text.slice(4, 10);

它的参数含义清晰，并且支持负数索引，适合从字符串末尾截取内容。substring() 在某些场景下也很有用，尤其是你明确希望负数按 0 处理时。对于旧代码中的 substr()，可以继续理解和维护，但编写新代码时通常应避免使用。

记忆口诀：

• substr：第二个参数是“长度”。

• substring：第二个参数是“结束位置”，负数按 0 处理，参数会交换。

• slice：第二个参数是“结束位置”，负数从末尾倒数，参数不交换。